<template>
    <section class="organization-list maxW">
        <h2>接入{{rowName}}</h2>
        <div class="organization-content">
            <div :class="`org-c1 bg${serverType}`">{{total_number}}</div>
            <transition-group name="list" class="transform-part">
                <div class="org-c2" key="1" v-if="isLists">
                    <div class="org-p1">
                        <el-input :placeholder="`输入${rowName}名称`" size="small" suffix-icon="el-icon-search" v-model="keyword" @input="search" @keyup.enter.native="search"></el-input>
                        <div class="pointer">
                            <el-button type="text" :disabled="page_index===1" :class="page_index===1?'disable-click':''" @click="changePage(-1)"><i class="el-icon-arrow-left"></i></el-button>
                            <el-button type="text" :disabled="page_index===page_max" :class="page_index===page_max?'disable-click':''" @click="changePage(1)"><i class="el-icon-arrow-right"></i></el-button>
                        </div>
                    </div>
                    <div class="org-p2">
                        <template v-if="resData.length>0">
                            <ul>
                                <li v-for="(item, index) of resData" :key="index" @click="handlerlist(item)">
                                    <span class="li-content">{{ item.name }}</span>
                                    <img v-if="item.is_check_school" src="../../../assets/images/possion.png" class="possion"/>
                                </li>
                            </ul>
                        </template>
                        <template v-else>
                            <div class="empty-row">暂无数据</div>
                        </template>
                    </div>
                </div>
                <div class="details" key="2" v-else>
                    <el-row class="title">
                        <el-col :span="20" class="title-name"><el-button size="mini" type="text" @click="isLists=true"><i class="el-icon-arrow-left"></i>{{ liData.name }}</el-button></el-col>
                        <el-col :span="4" style="text-align:right;"><el-button class="visit-btn" type="primary" plain size="mini" @click="visist(liData.app_code)"><i>快捷访问 </i> <i class="el-icon-arrow-right"></i></el-button></el-col>
                    </el-row>
                    <div>
                        <el-row>
                            <el-col :span="9"><img class="culture-pic" :src="BASE_URL+liData.school_culture.picture" alt="picture" @click="visist(liData.app_code)"></el-col>
                            <el-col :span="15" class="no-data" v-if="liData.school_culture.content===''">- 暂无简介 -</el-col>
                            <el-col :span="15" class="school-content" v-html="liData.school_culture.content" v-else></el-col>
                        </el-row>
                        <el-row class="counts">
                            <el-col :span="12">
                                <p class="little-title">上月新增</p>
                                <ul class="last-month">
                                    <li><i>{{liData.last_month.live_num}}</i><i>直播</i></li>
                                    <li><i>{{liData.last_month.resource_num}}</i><i>资源</i></li>
                                    <li><i>{{liData.last_month.video_num}}</i><i>视频</i></li>
                                    <li><i>{{liData.last_month.teacher_num}}</i><i>名师</i></li>
                                </ul>
                            </el-col>
                            <el-col :span="12">
                                <p class="little-title">总计数据</p>
                                <ul class="total-counts">
                                    <li><i>{{liData.all.live_num}}</i><i>直播</i></li>
                                    <li><i>{{liData.all.resource_num}}</i><i>资源</i></li>
                                    <li><i>{{liData.all.video_num}}</i><i>视频</i></li>
                                    <li><i>{{liData.all.teacher_num}}</i><i>名师</i></li>
                                </ul>
                            </el-col>                        
                        </el-row>
                    </div>
                </div>
            </transition-group>
        </div>
    </section>
</template>
<script>

export default {
    props: {
        serverType: {
            required: true,
            type: Number,
            default: 1
        },
        rowName: {
            required: true,
            type: String,
            default: ""
        },
    },
	data() {
		return {
            keyword:"",
			page_index: 1,
			page_size: 9,
			page_max: 1,
            total_number: 0,
            resData:[],
            isLists:true,
          
		};
    },
    created () {
    },
	mounted() {
        this.getData();
	},
	computed: {
        
    },
	beforeDestroy() {},
	methods: {
        search(){
            this.getData();
        },
		getData() {
			let params = {
				keyword: this.keyword,
				server_type: this.serverType,
				status: 1,
                page_index: this.page_index,
                page_size: this.page_size,
			};
			let success = res => {
                this.resData = res.data.data;
                this.page_index = res.data.page_index;
                this.total_number = res.data.data_sum;
                this.page_max = res.data.page_max;
			};
			this.$ajax.get('api/newlevel/platform_list', {
				params: params,
				func: { success: success }
			});
        },
        changePage(val){
            this.page_index = this.page_index + val;
            this.getData();
        },
        handlerlist(item){
            this.liData = item;
            this.isLists = false;
        },
        visist(code){
            let url = '';
            const host = sessionStorage.getItem('host');
            const token = localStorage.getItem('logintoken');
            const protocol = sessionStorage.getItem('protocol');

            if(token){
                url = protocol + '//' + host + '/login?token=' + token + '&protocol='+ protocol +'&host=' + host + '&CheckSchoolAppCode=' + code;
            }else{
                url = protocol + '//' + host + '?host=' + host + '&CheckSchoolAppCode=' + code;
            }
            window.open(url);
        },
	}
};
</script>

<style lang="scss">
  .organization-list{
        padding-top:30px;
        h2{
            font-size: 18px;
            line-height: 24px;
            padding-bottom: 12px;
        }
    }
	.organization-content{
		.org-c1,.org-p1,.org-p2{
            display: inline-block;
			border-radius: 2px;
		}
		.org-c1{
            width: 240px;
            height: 420px;
            line-height: 420px;
			text-align: center;
			font-size: 20px;
			color: #fff;
			// background-color: #409EFF;
			box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            overflow: hidden;
            &.bg1{
                background-image: url('../../../assets/images/organization1.png');
                background-size: 100% 100%;
            }
            &.bg2{
                background-image: url('../../../assets/images/organization2.png');
                background-size: 100% 100%;
            }            
        }
        .org-c2{
            margin-left: 20px;
            display: inline-block;
             width:100%;
            //  width: calc(100% - 160px);
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            }

		.org-p1{
            display: flex;
            justify-content: space-between;
			height: 60px;
            line-height: 60px;
            padding: 0 30px;
			background-color: #fff;
            margin-bottom: 20px;
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
            
			.el-input{
				width: 300px;
                .el-input__inner{
                    border-radius: 30px;    
                }
            }
            .pointer{
                i{
                    font-size: 20px;
                    font-weight: 600;
                    color: #409EFF;
                    padding: 8px;
                }
                .disable-click{
                    i{
                        color: #DCDFE6;
                    }
                }
            }
		}
		.org-p2{
            width: 100%;
            ul{
		        display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: 3fr;
                 grid-gap: 20px;
                 li{
                    text-align: center;
                    border-radius: 2px;
                    font-size: 22px;
			        background-color: #fff;
			        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                     position: relative;
                 }
                 .li-content{
                     display: inline-block;
                     height: 100px;
                     line-height: 100px;
                 }
                 .possion{
                     position: absolute;
                     top: 0;
                     right: 0;
                 }
            }
        }
	}
    .details{
        box-sizing: border-box;
        display: inline-block;
        height: 420px;
        padding: 16px 20px;
        overflow: hidden;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        .el-row{
            padding: 0 0 15px;
        }
        .title-name{
            font-size: 24px;
            height: 36px;
            line-height: 36px;
            .el-button{
                height: 100%;
                font-size: 24px;
                font-weight: 600;
                color: #000;
            }
            .el-icon-arrow-left{
                color: #666;
                margin-right: 10px;
            }
        }
        .visit-btn{
            width: 100px;
            height: 36px;
            padding: 0;
        }
        .culture-pic{
            display: inline-block;
            width: 320px;
            height: 180px;
            cursor: pointer;
        }
        .no-data{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 180px;
            color: #666;
        }
        .school-content{
            line-height: 18px;
            max-height: 180px;
            overflow-y: scroll;
        }
        .counts{
            .little-title{
                font-size: 14px;
                padding: 10px 0;
            }
            ul{
                display: flex;
                width: 440px;
                height: 110px;
                border-radius: 5px;
            }
            li{
                width: 108px;
                height: 80px;
                text-align: center;
                margin-top: 15px;
                i{
                    font-size: 14px;
                    display: block;
                }
                i:first-child{
                    line-height: 56px;
                   font-size: 30px;
                   font-weight: 600;
                }
            }
            li:last-child{
                border-right: none;
            }
        }
        .last-month{
            background-color: #e5f8ff;
            li{
                color: #2C799D;
                border-right: 2px dashed #8DBCD2;
            }
        }
        .total-counts{
            background-color: #e6f7d7;
            li{
                color: #298837;
                border-right: 2px dashed #8DD2A9;
            }
        }
    }


    .transform-part{
        display: inline-block;
        height: 420px;
        width: calc(100% - 240px);
        position: relative;
    }
    .list-enter-active, .list-leave-active {
        transition: all .2s;
    }
    .list-enter, .list-leave-to {
        opacity: 0;
    }
    .list-enter {
        transform: translateX(20px);
    }
    .list-leave-to {
        transform: translateZ(-20px);
    }        
</style>
